<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>Kukbuk - Skracanie adresów</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css"
	href="../../../css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../../../css/custom.css"
	th:href="@{/css/custom.css}" />
</head>

<body>
	<!-- TOP MENU -->
	<div th:substituteby="template :: top-menu"></div>
	<!-- /TOP MENU -->

	<!-- MAIN CONTAINER -->
	<div class="container">


		<!-- MESSAGE BOXES -->
		<div class="row" th:substituteby="template :: message-boxes"></div>
		<!-- /MESSAGE BOXES -->


		<div class="row">
			<div class="page-header">
				<h1>Skracanie adresów URL</h1>
			</div>
		</div>

		<!-- INPUT URL -->
		<div class="row">
			<form th:action="@{/shorten}" th:object="${form}" method="POST"
				class="search-form">
				<div class="control-group"
					th:classappend="${#fields.hasErrors('url')}? 'error'">
					<div>
						<span class="help-inline" th:if="${#fields.hasErrors('url')}"
							th:errors="*{url}">ERROR</span>
					</div>
					<input type="text" class="input-xxlarge search-query"
						placeholder="URL" th:field="*{url}" />
					<button type="submit" class="btn btn-primary">
						<i class="icon-resize-small icon-white"></i>Skróć
					</button>
				</div>
			</form>
		</div>
		<!-- /INPUT URL -->

		<!-- RESULT URL -->
		<div class="row" th:if="${form.result}">
			<h2>Wynik</h2>
			<input type="text" class="input-xxlarge search-query"
				th:value="${form.result}" />
		</div>
		<!-- /RESULT URL -->
	</div>
	<!-- /MAIN CONTAINER -->

	<!-- ======================================================== -->
	<!-- Scripts at bottom of page means faster loading times. -->
	<!-- Latest jQuery -->
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<!-- Bootstrap -->
	<script type="text/javascript" src="../../js/bootstrap.min.js"
		th:src="@{/js/bootstrap.min.js}"></script>
</body>
</html>